<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06 全选和反选3层</title>
    <style>
      input[type="checkbox"] {
        width: 20px;
        height: 20px;
        background-color: #fff;
        -webkit-appearance: none;
        border: 1px solid #c9c9c9;
        border-radius: 2px;
        outline: none;
      }

      input[type="checkbox"]:checked {
        background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
          no-repeat center;
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 一级复选框 -->
      <input type="checkbox" name="" id="" />全选
      <div>
        <ul>
          <li>
            <p><input type="checkbox" name="" id="" />店铺:柳螺香</p>
            <ul>
              <li><input type="checkbox" name="" id="" />绿茶</li>
              <li><input type="checkbox" name="" id="" />红茶</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {},
    });
  </script>
</html>
